<template>
  <div>
    <demo-component
      name="中间弹出层"
      :codeStr="codeStr1">>
      <template v-slot:code>
        <h-button text="显示中间popup" @btnClick="state.isShowCenterPopup = true" />
        <h-popup
          :show="state.isShowCenterPopup"
          @click="closeCenterPopup"
        >
          <div class="popup-center">center</div>
        </h-popup>
      </template>
    </demo-component>
    <demo-component
      name="顶部弹出层"
      :codeStr="codeStr2">>
      <template v-slot:code>
        <h-button text="显示顶部popup" @btnClick="state.isShowTopPopup = true"/>
        <h-popup
          :show="state.isShowTopPopup"
          @click="closeTopPopup"
          position="top"
        >
          <div class="popup-top">top</div>
        </h-popup>
      </template>
    </demo-component>
    <demo-component
      name="底部弹出层"
      :codeStr="codeStr3">>
      <template v-slot:code>
        <h-button text="显示底部popup" @btnClick="state.isShowBottomPopup = true"/>
        <h-popup
          :show="state.isShowBottomPopup"
          @click="closeBottomPopup"
          position="bottom"
        >
          <div class="popup-bottom">bottom</div>
        </h-popup>
      </template>
    </demo-component>
    <demo-component
      name="左边弹出层"
      :codeStr="codeStr2">>
      <template v-slot:code>
        <h-button text="显示左边popup" @btnClick="state.isShowLeftPopup = true"/>
        <h-popup
          :show="state.isShowLeftPopup"
          @click="closeLeftPopup"
          position="left"
        >
          <div class="popup-left">left</div>
        </h-popup>
      </template>
    </demo-component>
    <demo-component
      name="右边弹出层"
      :codeStr="codeStr2">>
      <template v-slot:code>
        <h-button text="显示右边popup" @btnClick="state.isShowRightPopup = true"/>
        <h-popup
          :show="state.isShowRightPopup"
          @click="closeRightPopup"
          position="right"
        >
          <div class="popup-right">right</div>
        </h-popup>
      </template>
    </demo-component>
  </div>
</template>
<script>
import { reactive } from 'vue'
import DemoComponent from './demo-component.vue'
export default {
  setup () {
    const state = reactive({
      isShowCenterPopup: false,
      isShowTopPopup: false,
      isShowBottomPopup: false,
      isShowLeftPopup: false,
      isShowRightPopup: false,
    })

    const closeCenterPopup = () => {
      state.isShowCenterPopup = false
    }

    const closeTopPopup = () => {
      state.isShowTopPopup = false
    }

    const closeBottomPopup = () => {
      state.isShowBottomPopup = false
    }

    const closeLeftPopup = () => {
      state.isShowLeftPopup = false
    }

    const closeRightPopup = () => {
      state.isShowRightPopup = false
    }

    return {
      state,
      closeCenterPopup,
      closeTopPopup,
      closeBottomPopup,
      closeLeftPopup,
      closeRightPopup
    }
  },
  data () {
    return {
      codeStr1: `<h-popup :show="state.isShowCenterPopup"
          @click="closeCenterPopup"
        >
          <div class="popup-center">center</div>
        </h-popup>`,
      codeStr2: ` <h-popup :show="state.isShowTopPopup"
          @click="closeTopPopup"
          position="top"
        >
          <div class="popup-top">top</div>
        </h-popup>`,
      codeStr3: `<h-popup :show="state.isShowBottomPopup"
          @click="closeBottomPopup"
          position="bottom"
        >
          <div class="popup-bottom">bottom</div>
        </h-popup>`,
      codeStr4: `<h-popup :show="state.isShowLeftPopup"
          @click="closeLeftPopup"
          position="left"
        >
          <div class="popup-left">left</div>
        </h-popup>`,
      codeStr5: `<h-popup :show="state.isShowRightPopup"
          @click="closeRightPopup"
          position="right"
        >
          <div class="popup-right">right</div>
        </h-popup>`
    }
  },
  props: {
  },
  methods: {

  },
  computed: {
  },
  components: {
    DemoComponent
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
};
</script>
<style>
.popup-center {
  width: 100px;
  height: 100px;
  background: #fff;
}

.popup-top {
  height: 30%;
  z-index: 2187;
}

.popup-bottom {
  height: 30%;
  z-index: 2187;
}

.popup-left {
  width: 50vh;
  height: 100vh;
  z-index: 2185;
}

.popup-right {
  width: 100px;
  height: 100vh;
  z-index: 2185;
}

</style>
